<template>
	<div id="vip">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>VIP会员</p>
		</div>
		<div class="vip_1">
			<img src="../../static/img/vip-01.png"/>
			<div class="user">
				<img :src="avatar"/>
				<div class="user_name">
					<p>{{userName}}</p>
					<div>
						<img v-show="vip == 1" src="../../static/img/vip.png"/>
						<p :class="vip == 1?'isvip':''">{{vip == 1?'VIP':'普通用户'}}</p>
					</div>
					<p v-show="vip == 1" class="time">剩余会员天数：{{vipRemain}}天</p>
				</div>
			</div>
		</div>
		<!--------充值播报----------->
		<div class="recharge_notice">
			<img src="../../static/img/vip-06.png"/>
			<swiper :options="swiperOption">
				<swiper-slide v-for="item in noticeList">
					<p>[{{item.username}}]购买了{{parseInt(item.currOpenDays/30)}}个月VIP会员</p>
				</swiper-slide>
			</swiper>
		</div>
		<div class="vip_title">
			<p>赶紧试VIP套餐</p>
		</div>
		<!-------选择套餐----------->
		<div class="vip_2">
			<swiper :options="swiperOption1">
				<swiper-slide v-for="(item, key) in mealList">
					<img :src="'./static/img/vip-0'+(key+2)+'.png'"/>
					<div class="vip_type">
						<p class="everyday">每天仅需{{oneDayPrice(item.moneyPrice, item.duration)}}</p>
						<div class="vip_price">
							<p>{{Math.floor(item.duration/30)}}个月</p>
							<p>¥<span>{{item.moneyPrice}}</span></p>
						</div>
						<div class="gold">
							<img src="../../static/img/vip-14.png"/>
							<p>{{item.coinPrice}}金币兑换</p>
						</div>
					</div>
				</swiper-slide>
			</swiper>
		</div>
		<!-------开通按钮--------->
		<div @click="selectOpen" class="openVip">
			<img src="../../static/img/vip-07.png"/>
			<p><span>立即开通</span><span>享受特权</span></p>
		</div>
		<!-------会员特权对比----------->
		<div class="vip_title">
			<p>会员特权对比</p>
		</div>
		<div class="contrast">
			<div class="contrast_title">
				<p>VIP会员</p>
				<p>普通用户</p>
			</div>
			<div class="contrast_item">
				<div>
					<p>中奖率增加{{memberParam.winRate*100}}%</p>
					<img src="../../static/img/vip-08.png"/>
					<p>无增加</p>
				</div>
				<p>免费试用中奖率</p>
			</div>
			<div class="contrast_item">
				<div>
					<p>中奖数最多{{memberParam.win}}个</p>
					<img src="../../static/img/vip-09.png"/>
					<p>中奖数最多{{normalParam.win}}个</p>
				</div>
				<p>免费试用每日中奖数</p>
			</div>
			<div class="contrast_item">
				<div>
					<p>兑换次数{{memberParam.winByCoins}}次</p>
					<img src="../../static/img/vip-10.png"/>
					<p>无法兑换</p>
				</div>
				<p>金币必中每日兑换次数</p>
			</div>
			<div class="contrast_item">
				<div>
					<p>参与次数{{memberParam.coinsLottery}}次</p>
					<img src="../../static/img/vip-11.png"/>
					<p>参与次数{{normalParam.coinsLottery}}次</p>
				</div>
				<p>金币抽奖每日参与次数</p>
			</div>
			<div class="contrast_item">
				<div>
					<p>赠送368金币</p>
					<img src="../../static/img/vip-12.png"/>
					<p>无赠送</p>
				</div>
				<p>每月免费赠送金币</p>
			</div>
			<div class="contrast_item">
				<div>
					<p>VIP专属高级标志</p>
					<img src="../../static/img/vip-13.png"/>
					<p>无标志</p>
				</div>
				<p>VIP专属标志</p>
			</div>
		</div>
		<!--------说明------------>
		<div class="instructions">
			<p>问题反馈说明</p>
			<ul>
				<li>1.支付会费后会员特权即时生效</li>
				<li>2.活动期间如遇不可抗力因素导致的会员服务异常的情况，赶紧试有权采取相应调整措施。</li>
				<li>3.本次活动最终解释权归赶紧试所有</li>
			</ul>
		</div>
		<!--------支付方式---------->
		<div @click="selectClose" id="select" v-show="selectSwitch">
			<div class="select">
				<ul class="select_list">
					<li v-for="(item, key) in selectList" @click="selectClose,payPassword = true, type = (key+1)">
						{{item}}
					</li>
				</ul>
				<input @click="selectClose, type=0" class="select_cancel" type="button" value="取消" />
			</div>
		</div>
		<!-------输入密码---------->
		<div id="pay_password" v-show="payPassword">
			<div class="pay_password">
				<div class="password_input">
					<p>支付密码：</p>
					<input type="password" v-model="password" placeholder="首次输入为登录密码" />
				</div>
				<div class="pay_btns">
					<input @click="payClose" type="button" value="取消" />
					<input type="button" @click="checkPayPwd" value="确定" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default{
	name: 'vip',
	data:function(){
		const that = this;
		return{
			avatar: './static/img/remove-04.png',
			userName: '',
			sex:'',
			vip: 0,
			vipRemain:0,
			//---------套餐列表-----------
			mealList:[{
				moneyPrice: 0.0
			}],
			selectSwitch: false,//选择菜单开关
			selectList:[//账号选择数组
				'余额支付',
				'金币支付',
//				'微信支付'
			],
			password: '',//支付密码
			payPassword: false,//支付密码弹窗开关
			//---------公告列表-----------
			noticeList:[],
			//---------轮播组件-----------
			swiperOption: {
				autoplay: {
				    delay: 5000,
				    stopOnLastSlide: false,
				    disableOnInteraction: true,
			    },
				loop: true,//
				direction : 'vertical',//竖向滚动
				allowTouchMove: false,//禁止触摸滑动
			},
			//---------轮播组件-----------
			swiperOption1: {
				effect : 'coverflow',
				initialSlide :1,
				slidesPerView: 1.8,
				centeredSlides: true,
				coverflowEffect: {
				    rotate: 0,
				    stretch: 10,
				    depth: 90,
				    modifier: 2,
				    slideShadows : true
				},
//				loop: true,
				on: {
				    slideChange: function(){
//				        console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
						that.index = this.activeIndex;
				    },
				},
			},
			normalParam: {}, // 普通用户参数
			memberParam: {}, // 会员参数
			index: 0,	// 套餐下标
			type: 0,	// 开通方式  1 余额 2 金币
		}
	},
	components: {
	   swiper,
	   swiperSlide
	},
	methods:{
		// ----- 获取用户信息 -----
		getUserInfo: function(){
			var _this = this;
			_this.$axios.post("/user/info/getBaseInfo").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.userName = data.result.username;
					_this.avatar = data.result.avatarUrl;
					_this.vip = data.result.isMember;
					_this.sex = data.result.sex;
					_this.vipRemain = data.result.vipRemain;
					if(_this.sex == 0){
						_this.avatar = "./static/img/girl.png"
					}else{
						_this.avatar = "./static/img/girl.png"
					}
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		
		//--------Select相关事件---------
	    selectClose: function(){//关闭选择菜单
	    	this.selectSwitch = false;
	    	this.password = '';
	    },
	    selectOpen: function(){//打开选择菜单
	    	this.selectSwitch = true;
	    },
	    payOpen:function(){//打开支付密码弹窗
//			if(this.money > this.balance){
//				this.$alert("余额不足");
//				return;
//			}
			this.payPassword = true;
		},
		payClose:function(){//关闭支付密码弹窗
			this.payPassword = false;
		},
		// ----- 获取最新用户购买会员消息 -----
		getNewRecharge: function(){
			var _this = this;
			_this.$axios.post("/user/member/getNewOpenMember").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.noticeList = data.result;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		// ----- 获取会员套餐 -----
		getMemberMeal: function(){
			var _this = this;
			_this.$axios.post("/user/memberMeal/selectAll").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.mealList = data.result;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		// ----- 计算每天价格 -----
		oneDayPrice: function(num, days){
			var price = num/days*10;
			price = price.toFixed(1);
			price = new String(price);
			return price.replace('.', '毛')
		},
		// ----- 获取参数 -----
		getParam: function(){
			var _this = this;
			_this.$axios.post("/user/param/select").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.normalParam = data.result[0];
					_this.memberParam = data.result[1];
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		// ----- 验证支付密码  -----
		checkPayPwd: function(mealId){
			var _this = this;
			if(!_this.password){
				_this.$alert("请输入支付密码");
				return;
			}
			if(_this.password.length < 6){
				_this.$alert("密码必须大于6位");
				return;
			}
			let postData = _this.$qs.stringify({
				password: _this.password
			});
			_this.$axios.post("/user/info/checkPayPwd", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					if(data.result){
						_this.openVip();
					}else{
						_this.$confirm("支付密码不正确，是否前往修改密码", function(){
							_this.$router.push('/user/findPayPw');
						});
					}
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		// ----- 开通会员 -----
		openVip: function(){
			var _this = this;
			if(_this.type == 0){
				return;
			}
			_this.$loading();
			let postData = _this.$qs.stringify({
				type: _this.type,
				mealId: _this.mealList[_this.index].id
			});
			_this.$axios.post("/user/member/openMember", postData).then(function(res){
				var data = res.data;
				_this.payPassword = false;
				_this.getUserInfo();
				_this.$alert(data.result);
				$("#loading").remove();
			}).catch(function (error) {
				console.log(error);
			});
		}
	},
	created: function(){
		this.getUserInfo();
		this.getNewRecharge();
		this.getMemberMeal();
		this.getParam();
	}
}
</script>

<style>
#vip .swiper-container-3d .swiper-slide-shadow-left,
#vip .swiper-container-3d .swiper-slide-shadow-right{
	height: 83%;
	top: 17%;
}
</style>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#vip{
	min-height: 100%;
	padding-top: 5rem;
	padding-bottom: 0.5rem;
	box-sizing: border-box;
	/*background: linear-gradient(to right,#291B39,#1B112C);*/
	background-color: #1e122f;
}
.vip_1{
	width: 94%;
	margin: 0 auto;
	position: relative;
}
.vip_1>img{
	width: 100%;
	display: block;
}
.vip_1 .user{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	padding: 0 1.5rem;
	box-sizing: border-box;
}
.vip_1 .user>img{
	height: 60%;
	display: block;
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,0.1);
	margin-right: 1.5rem;
}
.user_name{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.user_name>p{
	font-size: 1.4rem;
	color: #CAB0EA;
	margin-bottom: 0.5rem;
}
.user_name  div{
	width: 6rem;
	font-size: 1.2rem;
	color: #8E76BF;
	background-color: #3D2456;
	padding: 0.2rem 0;
	border-radius: 50px;
	position: relative;
}
.user_name  div img{
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: -0.8rem;
}
.user_name  div p{
	text-align: center;
}
.user_name  div p.isvip{
	color: #FFE985;
	font-size: 1.4rem;
}
.user_name p.time{
	color: #FFE985;
	font-size: 1.2rem;
	margin-bottom: 0;
	margin-top: 0.5rem;
	margin-left: -0.5rem;
}
/*------------播报------------*/
.recharge_notice{
	height: 3rem;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	color: #CAB0EA;
	border-bottom: 1px dashed #3F354D;
}
.recharge_notice img{
	height: 1rem;
	display: block;
	margin-right: 0.5rem;
}
.recharge_notice .swiper-container,.swiper-wrapper{
	height: 100%;
	margin: 0;
}
.recharge_notice .swiper-slide{
	height: 3rem;
	display: flex;
	align-items: center;
}
/*-----------标题--------------*/
.vip_title{
	background: url('../../static/img/vip-05.png') no-repeat center;
	background-size: 80% auto;
	height: 3rem;
}
.vip_title p{
	color: #E9C07B;
	font-size: 1.2rem;
	text-align: center;
	padding-left: 1rem;
	box-sizing: border-box;
	height: 3rem;
	line-height: 3rem;
}
/*--------套餐选择--------------*/
.vip_2{
	width: 100%;
	margin: 0 auto;
	margin-top: 1rem;
}
.vip_2 .swiper-container,.swiper-wrapper{
	height: 100%;
	width: 100%;
	margin: 0;
}
.vip_2 .swiper-slide{
	display: flex;
	align-items: center;
	width: 80%;
	position: relative;
}
.vip_2 .swiper-slide>img{
	width: 100%;
	display: block;
}
.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right{
	height: 83%;
	top: auto;
	bottom: 0;
}
.vip_type{
	position: absolute;
	width: 100%;
	height: 83%;
	left: 0;
	bottom: 0;
}
.vip_type .everyday{
	font-size: 1.8rem;
	color: #FF6565;
	text-align: center;
	margin-top: 10%;
}
.vip_type .vip_price{
	margin-top: 20%;
}
.vip_type .vip_price p{
	color: #000000;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
}
.vip_type .vip_price p span{
	font-size: 2.4rem;
	margin-left: 0.3rem;
}
.vip_type .gold{
	width: 80%;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.1);
	border-radius: 50px;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	margin-top: 8%;
	color: #000000;
}
.vip_type .gold img{
	height: 1.5rem;
	display: block;
	margin-right: 0.5rem;
}
/*--------开通按钮----------*/
.openVip{
	width: 70%;
	margin: 0 auto;
	position: relative;
	margin-top: 2rem;
	margin-bottom: 4rem;
}
.openVip img{
	width: 100%;
	display: block;
}
.openVip p{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 1.6rem;
}
.openVip p span:first-child{
	margin-right: 1rem;
}
.contrast{
	width: 94%;
	margin: 0 auto;
	border: 1px solid #BA984B;
	margin-top: 1rem;
}
.contrast_title{
	display: flex;
	justify-content: space-between;
	padding: 1rem 0;
	border-bottom: 1px solid #BA984B;
}
.contrast_title p:first-child{
	width: 45%;
	text-align: center;
	color: #a1874e;
	font-size: 1.2rem;
}
.contrast_title p:last-child{
	width: 45%;
	text-align: center;
	color: #7d738a;
	font-size: 1.2rem;
}
.contrast_item{
	padding: 1.5rem 1.5rem 1rem 1.5rem;
	border-bottom: 1px solid #423937;
}
.contrast_item:last-child{
	border-bottom: none;
}
.contrast_item div{
	display: flex;
	justify-content: space-between;
	height: 2.4rem;
	padding: 0 2rem;
	box-sizing: border-box;
	position: relative;
	background: linear-gradient(to right,#382b33,50%,#382b33,50%,#251839,100%,#251839);
	border-radius: 50px;
}
.contrast_item div img{
	height: 3.4rem;
	width: 3.4rem;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: block;
	position: absolute;
	top: -0.5rem;
}
.contrast_item div p:first-child{
	height: 2.4rem;
	line-height: 2.4rem;
	color: #a1874e;
	font-size: 1.2rem;
}
.contrast_item div p:last-child{
	height: 2.4rem;
	line-height: 2.4rem;
	color: #7d738a;
	font-size: 1.2rem;
}
.contrast_item>p{
	color: #846d3a;
	text-align: center;
	margin-top: 1.5rem;
	font-size: 1.2rem;
}
/*--------说明----------*/
.instructions{
	width: 90%;
	margin: 0 auto;
	color: #7d738a;
	margin-top: 2rem;
	padding-bottom: 3rem;
}
.instructions p{
	font-size: 1.4rem;
}
.instructions ul li{
	font-size: 1.2rem;
	margin-top: 1rem;
	line-height: 1.5em;
}
/*------支付方式-----------*/
#payWay{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 11;
}
.payWay{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
}
.payWay .wayList{
	width: 94%;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.9);
	border-radius: 5px;
}
.payWay .wayList p{
	height:  4rem;
	line-height: 4rem;
	text-align: center;
	font-size: 1.2rem;
	color: #4F4F4F;
}
.payWay .wayList ul li{
	height: 3.2rem;
	line-height: 3.2rem;
	text-align: center;
	font-size: 1.2rem;
	color: #4F4F4F;
	border-top: 1px solid #B3B3B3;
}
.payWay input{
	width: 94%;
	display: block;
	margin: 1rem auto;
	background-color: rgba(255,255,255,0.9);
	border-radius: 5px;
	border: none;
	height: 3.2rem;
	color: #4F4F4F;
}
/*--------支付方式选择-----------*/
#select{
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 11;
}
#select .select{
	width: 100%;
	max-height: 16rem;
	position: fixed;
	bottom: 1rem;
	left: 0;
}
#select .select .select_list{
	overflow: hidden;
	max-height: 12rem;
	width: 94%;
	margin: 0 auto;
	border-radius: 5px 5px 0 0;
	background-color: #fff;
}
#select .select .select_list li{
	width: 100%;
	height: 4rem;
	font-size: 1.2rem;
	color: #787878;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #EEEEEE;
	box-sizing: border-box;
}
#select .select .select_list li.select_active{
	color: #FF6565;
}
#select .select .select_cancel{
	width: 94%;
	display: block;
	margin: 0 auto;
	border-radius: 0 0 5px 5px;
	height: 4rem;
	border: none;
	border-top: 1px solid #EEEEEE;
	background-color: #EEEEEE;
	color: #787878;
	font-size: 1.2rem;
}
/*---------输入密码----------*/
#pay_password{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 11;
}
.pay_password{
	width: 90%;
	background-color: #fff;
	border-radius: 3px;
	margin-top: -10%;
	overflow: hidden;
}
.password_input{
	background-color: #F6F6F6;
	color: #4f4f4f;
	display: flex;
	align-items: center;
	height: 6rem;
	justify-content: center;
	font-size: 1.2rem;
}
.password_input input{
	width: 50%;
	height: 3rem;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
}
.pay_btns{
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pay_btns input{
	width: 10rem;
	height: 3rem;
	border-radius: 50px;
	color: #FFFFFF;
	border: none;
}
.pay_btns input:first-child{
	background-color: #CBCBCB;
	margin-right: 5%;
}
.pay_btns input:last-child{
	background-color: #FEAA21;
}
</style>
